<template>
  <div class="menude">
    <div class="item1" @click="handleStartClick">
      <div class="shangpin-footer-item1-row1" >
          <img v-show="!isCollect" src="../../../assets/img/detail-start.png">
          <img v-show="isCollect" src="../../../assets/img/collect.png">
      </div>
      <div class="shangpin-footer-item1-row2">
        <span v-show="!isCollect">收藏</span>
        <span v-show="isCollect" style="color:#ff8430">已收藏</span>
      </div>
    </div>
    <router-link tag="div" to="/cart" class="item1">
      <div class="shangpin-footer-item1-row3">
          <img src="../../../assets/img/detail-cart.png">
          <span id="badge-span" v-show="isCartNum">{{isCartNum}}</span>
      </div>
      <div class="shangpin-footer-item1-row2 pt1">
          <span>购物车</span>
      </div>
    </router-link>
    <div class="item2">
      <div class="item2-panel" @click="handleCartClick(1)">
        <button type="button" class="skin-b1 item2-panel-button">加入购物车</button>
      </div>
      <div class="item2-panel" @click="handleCartClick(2)">
        <button type="button" class="skin-b2 item2-panel-button">立即购买</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'DetailMenuDe',
  props: {
    isCollect: Boolean
  },
  data () {
    return {
      isCartNum: ''
    }
  },
  methods: {
    handleStartClick () {
      this.isCollect = !this.isCollect
      // console.log(this.$route.params.pid)
      axios.get('/meimai/interface/goods/collectGoods', {
        params: {
          memberId: this.$store.state.userId,
          goodsId: this.$route.params.pid,
          isCollect: this.isCollect
        }
      }).then((res) => {
        let datas = res.data
        console.log(datas)
        this.$toast('成功')
      })
    },
    handleCartClick (data) {
      this.$emit('chenge', data)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .menude
    position: fixed
    bottom: 0
    background: white
    width: 100%
    border: .02rem #E2E2E2 solid
    height: 1.15rem
    z-index: 99
    .item1
      width: .8rem
      height: 1.15rem
      float: left
      margin-left: .1rem
      .shangpin-footer-item1-row1
        width: 100%
        padding: .16rem 0 0 .14rem
        img
          width: .52rem
      .shangpin-footer-item1-row2
        width: 100%
        text-align: center
        color: grey
        font-size: .24rem
        line-height: .36rem
      .pt1
        padding-top: .06rem
      .shangpin-footer-item1-row3
        width: 100%
        position: relative
        padding: .16rem 0 0 .04rem
        img
          width: .52rem
        #badge-span
          position: absolute
          top: 5px
          right: 0
          font-size: .2rem
          color: white
          border-radius: 2rem
          width: .36rem
          height: .36rem
          white-space: nowrap
          text-align: center
          line-height: .36rem
          background-color: #E4393C
    .item2
      height: 1.15rem
      top: 0
      left: 0
      padding-left: 95px
      .item2-panel
        width: 50%;
        float: left;
        text-align: center
        margin-top: .2rem
        .item2-panel-button
          font-size: .28rem
          height: .8rem
          width: 90%
          color: #fff
        .skin-b1
          background: #ec2935 !important
          border-color: #ec2935 !important
        .skin-b2
          background: #fbb839 !important
          border-color: #fbb839 !important
</style>
